// service-worker.js

const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
  '/',
  // './map.js',
  'https://webapi.amap.com/maps?key=1f520f629a5d77331f39101e3ba2ca7e', // 缓存高德地图 API
  // 添加其他需要缓存的文件路径
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );

  // 在 Service Worker 中发送消息
  self.clients.matchAll().then(clients => {
    clients.forEach(client => {
      client.postMessage({ type: 'getMapData' });
    });
  });
});

self.addEventListener('fetch', event => {
  const { request } = event;

  // 对于对 https://webapi.amap.com/maps 的请求，我们采用特定的缓存策略
  if (request.url.startsWith('https://webapi.amap.com/maps?key=1f520f629a5d77331f39101e3ba2ca7e')) {
    event.respondWith(
      caches.match(request)
        .then(response => {
          // 如果缓存中存在请求的数据，直接返回
          if (response) {
            return response;
          }

          // 否则，尝试从网络获取数据，并将其缓存以备将来使用
          return fetch(request)
            .then(networkResponse => {
              // 将获取到的数据放入缓存
              caches.open(CACHE_NAME)
                .then(cache => {
                  cache.put(request, networkResponse.clone());
                });
                        // 设置响应的 Content-Type
            const responseWithContentType = new Response(networkResponse.body, {
              headers: { 'Content-Type': 'application/javascript' }
            });

              return responseWithContentType;
            })
            .catch(error => {
              console.error('Error fetching map data:', error);
              // 如果从网络获取数据失败，则可以返回一个备用的响应，或者直接返回一个错误响应
              // 这里可以根据需要自定义响应
              return new Response('Offline map data is not available');
            });
        })
    );
    return;
  }

  // 对于其他请求，采用默认的缓存策略
  event.respondWith(
    caches.match(request)
      .then(response => {
        if (response) {
           // 设置响应的 Content-Type
          const responseWithContentType = new Response(response.body, {
            headers: { 'Content-Type': 'application/javascript' }
          });
        return responseWithContentType;
        }
        return fetch(request);
      })
  );
});
